<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DarkroomJS</title>
  <link rel="stylesheet" href="./build/darkroom.css">
  <link rel="stylesheet" href="./css/page.css">
</head>
<body>
  <header id="header">
    <a href="https://github.com/MattKetmo/darkroomjs">
      <img style="position: absolute; top: 0; right: 0; border: 0;"
        src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"
        alt="Fork on GitHub">
    </a>

    <div class="container">
      <h1>Darkroom<strong>JS</strong></h1>
      <p class="hero">
        Extensible image editing tool powered by HTML5 canvas.
      </p>
    </div>
  </header>

  <div id="content">
    <div class="container">
      <section class="copy">
        <h2 class="sr-only">Introduction</h2>

        <p class="intro">
          <strong>DarkroomJS</strong> is a JavaScript library which provides basic
          image editing tools in your browser, such as <strong>rotation</strong> or <strong>cropping</strong>.
          It is based on the awesome <a href="http://fabricjs.com/">FabricJS</a> library
          to handle images in HTML5 canvas.
        </p>

        <div class="figure-wrapper">
          <figure class="image-container target">
            <img src="./images/domokun-big.jpg" alt="DomoKun" id="target">

            <figcaption class="image-meta">
              <a target="_blank" href="http://www.flickr.com/photos/bentorode/5176910387/">
                ©
                <strong class="image-meta-title">DomoKun</strong>
                by
                <em class="image-meta-author">Ben Torode</em>
              </a>
            </figcaption>
          </figure>
        </div>

        <h2>Why?</h2>

        <p>
          It's easy to get a <a href="http://www.hotscripts.com/blog/javascript-image-cropping-scripts/">
          javascript script</a> to crop an image in a web page. But if you want
          more features like rotation or brightness adjustment, then you will have to do all of this yourself.
          No more jQuery plugins here. DarkroomJS allows you to do whatever you want with your images by
          using the power of the HTML5 canvas.
        </p>

        <h2>The concept</h2>

        <p>
          The library is designed to be easily extendable.
          The core script only transforms the target image to a canvas with a
          FabricJS instance, and creates an empty toolbar.
          All the features are then implemented in separate plugins.
        </p>

        <figure>
        <pre><code>.
├── darkroom.js
└── plugins
    ├── darkroom.crop.js
    ├── darkroom.history.js
    ├── darkroom.rotate.js
    └── darkroom.save.js</code></pre>
        </figure>

        <p>
          Each plugin is responsible for creating its own functionality.
          Buttons can easily be added to the toolbar and binded with those features.
        </p>

        <h2>Features</h2>

        <p>
          Currently, the implemented features are:
        </p>

        <dl>
          <dt>Crop</dt>
          <dd>
            Crops the image by selecting a zone with your mouse.
            This supports several options like ratio and dimensions control (min/max).
          </dd>

          <dt>Rotation</dt>
          <dd>
            Adds two buttons to let you rotate the image left or right.
          </dd>

          <dt>History</dt>
          <dd>
            Allows you to undo and redo any changes you've made to the image.
          </dd>

          <dt>Save</dt>
          <dd>
            Transforms the canvas back into an image.
            This is mainly a proof of concept to show how plugins work.
            This plugin only takes <a href="https://github.com/MattKetmo/darkroomjs/blob/master/lib/js/plugins/darkroom.save.js">a few lines</a>.
          </dd>
        </dl>

        <!--
        <h2>Interactive example</h2>
        <p></p>
        -->

        <h2>Contributing</h2>

        <p>
          The project is released under the MIT license.
          Feel free to fork the project on <a href="https://github.com/MattKetmo/darkroomjs">GitHub</a>
          or report issues. All ideas are also welcome.
        </p>

      </section>
    </div>
  </div>

  <script src="./vendor/fabric.js"></script>
  <script src="./build/darkroom.js"></script>

  <script>
    var dkrm = new Darkroom('#target', {
      // Size options
      minWidth: 100,
      minHeight: 100,
      maxWidth: 600,
      maxHeight: 500,
      ratio: 4/3,
      backgroundColor: '#000',

      // Plugins options
      plugins: {
        //save: false,
        crop: {
          quickCropKey: 67, //key "c"
          //minHeight: 50,
          //minWidth: 50,
          //ratio: 4/3
        }
      },

      // Post initialize script
      initialize: function() {
        var cropPlugin = this.plugins['crop'];
        // cropPlugin.selectZone(170, 25, 300, 300);
        cropPlugin.requireFocus();
      }
    });
  </script>

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-23657373-2', 'mattketmo.github.io');
    ga('send', 'pageview');
  </script>
</body>
</html>
